<template>
	<view class="container">
		<view style="background: #F5F5F5;">
			<view class="group">
				<!-- <text class="cell-icon yticon icon-jia1 add_btn"></text><text class="dingyue">邀请成员</text> -->
				<button open-type="share"><text class="cell-icon yticon icon-jia1 add_btn"></text><text class="dingyue">邀请成员</text></button>
			</view>	
		</view>
		
		<view style="background: #FFFFFF;">
			<view v-for="(item,index) in list" :key="index" :style="{'marginBottom':index==list.length-1?'30rpx':'0rpx'}" style="display: flex;align-items: center;margin-top: 30rpx;">
				<view style="display: flex;align-items: center;padding:0rpx 30rpx;">
					<image style="width: 80upx;height: 80upx;border-radius: 50%" :src="item.user_info.avatar"></image>
					<text v-if="hasLogin&&userInfo.user_info.id==cluster_info.user_id" class="nick">{{item.nickname}}</text>
					<text v-else class="nick-normal">{{item.nickname}}</text>
					<text class="role" v-if="item.role!=3">{{item.role_str}}</text>
					<text v-else class="role" style="border: none;"></text>
				</view>
				<view v-if="hasLogin&&cluster_info.user_id==userInfo.user_info.id">
					<view style="display: flex;align-items: center;">
						<text style="font-size: 28rpx;color: #999999" v-if="cluster_info.role==1">设为管理员</text>
						<switch v-if="cluster_info.role==1" color="#007aff" @change="setAdmin(item.id,item.user_id)" :checked="item.role==2"  style="transform:scale(0.7)"/>
						<image v-if="cluster_info.role==1" @click="removeMember(item.id,item.user_id)" src="/static/temp/des1.png" style="width: 48rpx;height: 48rpx;margin-right: 10rpx;"></image>
					</view>
				</view>
			</view>
	
			
		</view>
		
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex';
	import Api from '@/common/api';
	export default{
		components: {
		},
		data(){
			return {
					id:0,
					page: 1,
					size: 15,
					more_data: true,
					loadingType:'more',
					list:[],
					cluster_info:{}
				}
		},
		onLoad(option){
			// this.id = option.id;
			// this.loadList()
		},
		onShow(){
			let option=this.$api.currentPageOption();	
			this.id = option.id;
			this.page=1;
			this.more_data=true;
			this.list=[];
			this.loadList();
			this.loadDetail()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		
		
		onShareAppMessage(res){
			return {
				title:'邀请你加入接龙群组'+this.cluster_info.name,
				path:'/pages/group/invite?id='+this.id,
				imageUrl:'/static/temp/invite.png',
				
			}
		},
		onReachBottom(){
			this.loadList()
		},
		methods: {
			...mapMutations(['login']),
			async loadDetail(){
				
				let params = {
					id:this.id
				};
				let data = await Api.apiCall('get',Api.apiName.cluster_detail,params,true);
				if(!data){
					return;
				}
				this.cluster_info=data.data;
			},
			async loadList(){
				if(!this.more_data){
					return;
				}
				let params = {
					id:this.id,
					page: this.page,
					size: this.size,
				};
				let data = await Api.apiCall('get',Api.apiName.cluster_member,params);
				if(!data){
					return;
				}
				this.list = this.list.concat(data.data)
				if (data.data.length > 0 && data.data.length == this.size) {
					this.page++;
					this.loadingType = 'more';
				} else {
					this.loadingType = 'nomore';
					this.more_data = false;
				
				}
			},
			async setAdmin(id,user_id){
				let params = {
					id:id,
					user_id:user_id
				};
				let data = await Api.apiCall('post',Api.apiName.cluster_admin,params);
				if(!data){
					return;
				}
				this.$api.msg(data.data.message)
				let that = this;
				setTimeout(function(){
					that.page=1;
					that.more_data=true;
					that.list=[];
					that.loadList()
				},1500)
			},
			removeMember(id,user_id){
				let that = this;
				uni.showModal({
					content:'确定删除该成员吗?',
					success:(async (rel)=>{
						if(rel.confirm){
							let data = await Api.apiCall('post',Api.apiName.cluster_member_remove,{id:id,user_id:user_id});
							if(!data){
								return;
							}
							this.$api.msg(`删除成功`)
							setTimeout(function(){
								that.page=1;
								that.more_data=true;
								that.list=[];
								that.loadList()
							},1500)
						}
					})
				})	
			},
		},

	}
</script>

<style lang='scss'>
	page{
		background: #FFFFFF;
	}
	.container{
		display: flex;
		flex-direction: column;
	}
	button{
		background: none !important;
		line-height: 39rpx !important;
		height: 39rpx !important;
		font-size: 28rpx !important;
		color:#23A948 !important;
	}
	button::after{
		border: none !important;
	}
	.dingyue{
		margin-left: 20rpx;
	}
	.group{
		margin: 30rpx;
		text-align: center;
		background: #FFFFFF;
		padding: 30rpx;
		border-radius: 16rpx;
		color: #23A948;
	}
	.nick{
		font-size: 28rpx; 
		font-weight: 600; 
		margin-left: 20rpx;
		width: 160rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.nick-normal{
		font-size: 28rpx; 
		font-weight: 600; 
		margin-left: 20rpx;
		white-space: nowrap;
	}
	.role{
		border: 1px solid #23A948;
		border-radius: 20rpx;
		padding: 4rpx 16rpx;
		font-size: 20rpx;
		margin-left: 20rpx;
		width: 96rpx;
		text-align: center;
		color:#23A948;
	}
</style>
